<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P171 动手实践：购物车</title>
</head>
<body>
    <div class="cart">
        <div class="cart-little">我的购物车</div>
        <table class="cart-table">
            <tr>
                <th><span class="cart-all">全选</span></th><th>商品</th>
                <th>单价</th><th>数量</th><th>小计</th><th>操作</th>
            </tr>
            <tr class="cart-item">
                <td><input class="cart-check" type="checkbox" checked></td>
                <td><span class="cart-name">Loading...</span></td>
                <td><span class="cart-price">0</span></td>
                <td>
                    <span class="cart-reduce">-</span>>
                    <span class="cart-num">0</span>>
                    <span class="cart-add">+</span>>
                </td>
                <td><span class="cart-subtotal">0</span></td>
                <td><span class="cart-del">删除</span></td>
            </tr>
            <tr class="cart-bottom">
                <td colspan="6">
                    <span>已选择<span class="cart-total-num">0</span>件商品</span>
                    <span>总计<span class="cart-total-price">0</span></span>
                    <span>提交订单</span>
                </td>
            </tr>
        </table>
    </div>
    <script src="ShopCart.js"></script>
    <script>
        ShopCart('cart',[
            {name:'JavaScript实战',price:45.8,num:1},
            {name:'PHP基础案例教程',price:49.8,num:2},
            {name:'HTML+CSS网页制作',price:45.2,num:3},
            {name:'Java基础入门',price:45,num:4},
            (function(window){
                var ShopCart=function(prefix,defCart){
                    Find.prototype.prefix=prefix;
                };
                function Find(obj){
                    this.obj=obj;
                }
                Find.prototype.prefix='';
                Find.prototype.className=function(className){
                    return this.obj.getElementsByClassName(this.prefix+'-'+className)[0];
                };
                window['ShopCart']=ShopCart;
            })(window);
        ]);
        
    </script>
</body>
</html>